<template>
    <div class="search-nav">
      <a href="" class="search-nav-icon" @click.prevent="isShowSearchPanel(true)">
        <img src="../images/search.png" alt="" width="25">
        <span>vue项目实战</span>
      </a>
    </div>
</template>

<script>
    export default {
        name: 'SearchNav',
        props: {
          isShowSearchPanel: Function
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  // 引入外部公共样式，css的引入要用关键字@
  @import "../../../assets/stylus/mixins.styl"
  .search-nav
    width 100%
    height 60px
    background-color: #fff
    border-bottom-1px(#ccc)
    position fixed
    left 0
    top 0
    z-index 998
    display flex
    justify-content center
    align-items center
    .search-nav-icon
      width 90%
      height 70%
      background-color: #e8e8e8
      border-radius 10px
      display flex
      justify-content center
      align-items center
      span
        color #aaa
        margin-left 6px
        font-size 18px
        font-weight lighter
</style>
